<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="tester" style="width:1000px;height:500px"></div>
        <!-- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> -->
        <script>
            TESTER = document.getElementById('tester')
            let layout = { 
                margin: { t: 30 },
                title: 'Scroll and Zoom',
                showlegend: true
            } 
            let script = document.createElement('script');
            script.src = 'https://cdn.plot.ly/plotly-latest.min.js'
            script.onload = () => {
                // Plotly.plot(TESTER, data, layout)
                let data = request()
                Plotly.newPlot(TESTER, data, layout, {scrollZoom: true})
            }
            document.body.insertBefore(script, document.getElementsByTagName('script')[0])
            // Plotly.plot(TESTER, data, layout)

            function request() {
                let data = {
                    x: [1, 2, 3, 4, 5],
                    y: [1, 2, 4, 8, 16], 
                    type: 'scatter'
                }
                return [data]
            }
        </script>
    </body>
</html>